<template>
  <div class="MajorDeatil">
    <div class="logo">
      <div class="centre">
        <router-link
          to="index"
          tag="img"
          src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
          alt
        ></router-link>
        <span>专业详情</span>
        <div class="select111">
<<<<<<< HEAD
          <!-- <el-input class="select1" placeholder="请输入专业名称" v-model="input" clearable></el-input> -->
=======
          <el-input class="select1" placeholder="请输入专业名称" v-model="input" clearable></el-input>
          
>>>>>>> 314b442cce11d658746227581b0160373004c345
        </div>
        <div class="selectbox" v-if="selectshow==1">
          <div
            class="selectbox_content_box"
            v-for="(item,index) in selectresult"
            :key="index"
            @click="selectmajor(item)"
          >
            <span class="selectbox_content">{{item.category}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="Major">
      <h3 class="centre h3Deatil">
<<<<<<< HEAD
        <router-link to="index" tag="span">首页</router-link>
        <span>></span>
=======
        <router-link to="index" tag="span">首页</router-link>>
>>>>>>> 314b442cce11d658746227581b0160373004c345
        <span>专业详情</span>
      </h3>
      <div class="centre Majors">
        <div class="Major_left">
          <div class="Major_name">
            <span :class="show==2?'benke':'benke1'" @click="change(2)">本科</span>
            <span :class="show==1?'benke':'benke1'" @click="change(1)">专科</span>
          </div>
<<<<<<< HEAD
          <div class="Major_centent">
            <div class="Major_centent11111">
              <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
              <el-tree
                class="Major_centent_content"
                ref="tree"
                :data="majorbox"
                :props="defaultProps"
                @node-click="handleNodeClick"
                :filter-node-method="filterNode"
=======
          <div class="Major_centent" v-if="show==2">
            <div class="Major_centent11111">
              <el-tree
                class="Major_centent_content"
                :data="majorbox"
                :props="defaultProps"
                @current-change="handleNodeClick"
              ></el-tree>
            </div>
          </div>
          <div class="Major_centent" v-if="show==1">
            <div class="Major_centent11111">
              <el-tree
                class="Major_centent_content"
                :data="majorbox"
                :props="defaultProps"
                @node-click="handleNodeClick"
>>>>>>> 314b442cce11d658746227581b0160373004c345
              ></el-tree>
            </div>
          </div>
        </div>
        <div class="Major_right">
          <div class="top">
            <div class="top_left">
              <div class="MajorLogo">
                <i class="iconfont">&#xe60f;</i>
              </div>

              <div class="Major_name">
                <h3>{{majordeatilbox.majorName}}</h3>
                <p>{{majordeatilbox.onCategory+"/" }}{{majordeatilbox.twoCategory}}</p>
              </div>
            </div>
            <div class="top_right">
              <div class="follow" :plain="true" @click="goschoolPersonsl">
                <img v-if="guanzhushow==this.majorId" src="@/assets/img/follow.png" alt />
                <img v-if="guanzhushow!=this.majorId" src="@/assets/img/love2.png" alt />
              </div>

              <div class="icon">
                <span>分享至:</span>
                <ul>
                  <li>
                    <i class="iconfont">&#xe90b;</i>
                  </li>
                  <li>
                    <i class="iconfont">&#xe60e;</i>
                  </li>
                  <li>
                    <i class="iconfont">&#xe63d;</i>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="router">
            <ul>
              <!-- <router-link
                :to="{
               name: '/MajorDeatil/Deatils',
                params: { majorId:  this.$route.params.majorId }
                }"
                tag="li"
              >基本信息</router-link>
              <router-link
                :to="{
                
                 name: '/MajorDeatil/OpenSchool',
                params: { majorId:  this.$route.params.majorId }
                }"
                tag="li"
              >开设院校</router-link>
              <li></li>-->
              <router-link
                class="router"
                :to="{ path: '/MajorDeatil/Deatils', query: { majorId: this.majorId}}"
              >
                <li>基本信息</li>
              </router-link>
              <router-link
                class="router"
                :to="{ path: '/MajorDeatil/OpenSchool', query: { majorId: this.majorId}}"
              >
                <li>开设院校</li>
              </router-link>
              <!-- <router-link to="/MajorDeatil/Whereabouts" tag="li">毕业去向</router-link> -->
            </ul>
          </div>
          <div class="bottom">
            <transition name="fade">
              <keep-alive>
                <!-- <router-view></router-view> -->
                <router-view />
              </keep-alive>
            </transition>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
<<<<<<< HEAD
//防抖
const delay = (function() {
  let timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();

=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
export default {
  name: "MajorDeatil",
  data() {
    return {
      b: [],
      newguanzhulist: [],
      guanzhumajorbox: "",
      guanzhushow: 0,
      selectshow: 0,
      input: "",
      show: 2,
      majorId: this.$route.query.majorId,
      majorHeader: "",
<<<<<<< HEAD

=======
      majorbox: "",
>>>>>>> 314b442cce11d658746227581b0160373004c345
      majordeatilbox: "",
      selectresult: "",
      defaultProps: {
        children: "majorAllEntityList",
        label: "category",
        disabled: true
<<<<<<< HEAD
      },
      majorbox: "",
      majorList: {
        U: "",
        S: ""
      },
      filterText: ""
    };
  },

  methods: {
    // handleNodeClick(data) {
    //   //点击专业选项
    //   delay(() => {
    //     //执行部分 防抖
    //     if (data.type > 2) {
    //       this.majorId = data.majorAllId;
    //       this.$ajax({
    //         method: "get",
    //         url: "/api/major/guess/data/" + this.majorId,
    //         success: res => {
    //           if (res.data.code == 0) {
    //             this.majordeatilbox = res.data.data;
    //             this.$router.push({
    //               path: "/MajorDeatil/Deatils",
    //               query: {
    //                 majorId: this.majorId
    //               }
    //             });
    //           } else {
    //             this.open3(res.data.msg);
    //           }
    //         }
    //       });

    //       //获取关注列表接口，判断所点击的专业是否被关注，关注了就给状态this.guanzhushow = this.majorId; 关注按钮亮起来。
    //       this.$ajax({
    //         method: "post",
    //         url: "/api/follow/listMajor",
    //         data: {
    //           pageNow: 1,
    //           pageSize: 1000
    //         },
    //         success: res => {
    //           if (res.data.code == 0) {
    //             this.guanzhumajorbox = res.data.data.list;
    //             console.log(this.majorId);
    //             for (var i = 0; i < this.guanzhumajorbox.length; i++) {
    //               if (this.majorId == this.guanzhumajorbox[i].schoolId) {
    //                 this.guanzhushow = this.majorId;
    //               }
    //             }
    //           } else {
    //           }
    //         }
    //       });
    //     }
    //   }, 500);
    // },
    //提示失败
    open3(s) {
      this.$message.error(s);
    },
    //提示成功
    open1(g) {
      this.$message({
        message: g,
        type: "success"
      });
    },
    //筛选专业数
    filterNode(value, data) {
      if (!value) return true;

      return data.category.indexOf(value) !== -1;
    },
    getmajor() {
      //获取专业目录
      this.$ajax({
        method: "get",
        url: "/api/major/guess/catalogue/" + 1,

        success: res => {
          if (res.data.code == 0) {
            this.majorList.S = res.data.data;
          }
        }
      });
      this.$ajax({
        method: "get",
        url: "/api/major/guess/catalogue/" + 2,

        success: res => {
          if (res.data.code == 0) {
            this.majorList.U = res.data.data;
            this.majorbox = res.data.data;
=======
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      //点击专业选项
      //新定义的数组 前2级专业ID为undefined
      if (data.majorAllId === undefined) {
        this.majorId = data.majorAllId;
        this.majordeatilbox.majorName = data.category;
        this.majordeatilbox.onCategory = "--";
        this.majordeatilbox.twoCategory = "--";
        this.$router.push({
          path: "/MajorDeatil/Deatils",
          query: {
            majorId: data.majorAllId
          }
        });
      }
      //点击后传专业ID到专业详情接口，路由跳转到子路由，传专业ID过去，那边判断路由变化接收后遍历。
      this.majorId = data.majorAllId;
      this.$ajax({
        method: "get",
        url: "/api/major/guess/data/" + this.majorId,
        success: res => {
          if (res.data.code == 0) {
            this.majordeatilbox = res.data.data;
            this.$router.push({
              path: "/MajorDeatil/Deatils", 
              query: {
                majorId: this.majorId
              }
            });
          } else {
          }
        }
      });
  //获取关注列表接口，判断所点击的专业是否被关注，关注了就给状态this.guanzhushow = this.majorId; 关注按钮亮起来。
      this.$ajax({
        method: "post",
        url: "/api/follow/listMajor",
        data: {
          pageNow: 1,
          pageSize: 1000
        },
        success: res => {
          if (res.data.code == 0) {
            this.guanzhumajorbox = res.data.data.list;
            console.log(this.majorId);
            for (var i = 0; i < this.guanzhumajorbox.length; i++) {
              if (this.majorId == this.guanzhumajorbox[i].schoolId) {
                this.guanzhushow = this.majorId;
              }
            }
          } else {
          }
        }
      });
    },

    getmajor() {
      //获取专业目录
      this.$ajax({
        method: "get",
        url: "/api/major/guess/catalogue/" + this.show,

        success: res => {
          if (res.data.code == 0) {
            this.majorbox = res.data.data;
            //这里重新定义专业目录的数组，将前2级专业ID去掉。
            var arr = res.data.data;
            var bbb = [];
            arr.map(t => {  //map遍历  t为arr
              var obj = {
                category: t.category,
                disabled: true,
                majorAllEntityList: t.majorAllEntityList,
              };
              var arrNew = [];

              obj.majorAllEntityList.map(m => { //map遍历  m为obj.majorAllEntityList
                var obj1 = {
                  category: m.category,
                  disabled: true,
                  majorAllEntityList: m.majorAllEntityList,
                };

                return arrNew.push(obj1);  //返回出去
              });
              // console.log(arrNew)
              obj.majorAllEntityList = arrNew;
              // console.log(obj);

              return bbb.push(obj);
            });
            this.majorbox = bbb;
>>>>>>> 314b442cce11d658746227581b0160373004c345
          }
        }
      });
    },
    getmajordeatil() {
      //获取专业详情
      //如果页面刷新的专业前2级（undefined） 给一个初值
      if (this.$route.query.majorId == undefined) {
        this.$route.query.majorId = 10957;
        this.majorId = this.$route.query.majorId;
      }
      this.$ajax({
        method: "get",
        url: "/api/major/guess/data/" + this.$route.query.majorId,
        success: res => {
          if (res.data.code == 0) {
            this.majordeatilbox = res.data.data;
<<<<<<< HEAD
            this.$router.push({
              path: "/MajorDeatil/Deatils",
              query: {
                majorId: this.majorId
              }
            });
            // console.log(this.majordeatilbox);
=======
            // console.log(this.majordeatilbox);
          } else {
>>>>>>> 314b442cce11d658746227581b0160373004c345
          }
        }
      });
    },
    change(e) {
      //改变专业状态，本科与专科目录的切换
      if (e == 2) {
<<<<<<< HEAD
        this.majorbox = this.majorList.U;
        this.show = e;
      } else if (e == 1) {
        this.show = e;
        this.majorbox = this.majorList.S;
=======
        this.show = 2;
        this.getmajor();
      } else {
        this.show = 1;
        this.getmajor();
>>>>>>> 314b442cce11d658746227581b0160373004c345
      }
    },
    selectmajor(item) {
      //拿到搜索后的列表接口后，点击某一项专业，将该专业ID作为参数发送到后台获取关键字搜索的接口。
      this.selectshow = 0;
      this.$ajax({
        method: "get",
        url: "/api/major/guess/data/" + item.majorAllId,
        success: res => {
          if (res.data.code == 0) {
            //获取到接口数据后将数据放到this.majordeatilbox里，同时发送给子路由
            this.majordeatilbox = res.data.data;
            this.$router.push({
              path: "/MajorDeatil/Deatils",
              query: {
                majorId: item.majorAllId
              }
            });
<<<<<<< HEAD
            //获取关注专业接口，判断该专业是否已经关注。
=======
          //获取关注专业接口，判断该专业是否已经关注。
>>>>>>> 314b442cce11d658746227581b0160373004c345
            this.$ajax({
              method: "post",
              url: "/api/follow/listMajor",
              data: {
                pageNow: 1,
                pageSize: 1000
              },
              success: res => {
                if (res.data.code == 0) {
                  this.guanzhumajorbox = res.data.data.list;
                  for (var i = 0; i < this.guanzhumajorbox.length; i++) {
                    if (item.majorAllId == this.guanzhumajorbox[i].schoolId) {
                      this.guanzhushow = this.majorId;
                    }
                  }
                } else {
<<<<<<< HEAD
                  this.open3(res.data.msg);
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
                }
              }
            });
            // console.log(this.majordeatilbox);
          } else {
<<<<<<< HEAD
            this.open3(res.data.msg);
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
          }
        }
      });
    },
    goschoolPersonsl() {
      //点击关注按钮函数  获取关注成功与取消关注接口
      //如果点击的为前2级专业
      if (this.majorId == undefined) {
<<<<<<< HEAD
        this.$notify({
          title: "请点击具体专业",
          message: "请点击具体专业",
          type: "warning"
        });
=======
        alert("请选择具体专业");
>>>>>>> 314b442cce11d658746227581b0160373004c345
      }
      this.guanzhushow = !this.guanzhushow;
      this.$ajax({
        method: "post",
        url: "/api/follow/saveFollow?type=1&id=" + this.majorId,

        success: res => {
          if (res.data.code == 0) {
            // alert(res.data.data.data);
            //弹窗
<<<<<<< HEAD
            this.$notify({
              title: "成功",
              message: res.data.data.data,
              type: "success"
            });
=======
          this.$notify({
            title: '成功',
          message: res.data.data.data,
          type: 'success'
        });
>>>>>>> 314b442cce11d658746227581b0160373004c345
            this.$ajax({
              method: "post",
              url: "/api/follow/listMajor",
              data: {
                pageNow: 1,
                pageSize: 1000
              },
              success: res => {
                if (res.data.code == 0) {
<<<<<<< HEAD
                  console.log(22);
                  //获取关注专业接口，判断该专业是否已经关注。
=======
                   //获取关注专业接口，判断该专业是否已经关注。
>>>>>>> 314b442cce11d658746227581b0160373004c345
                  this.guanzhumajorbox = res.data.data.list;
                  for (var i = 0; i < this.guanzhumajorbox.length; i++) {
                    if (this.majorId == this.guanzhumajorbox[i].schoolId) {
                      this.guanzhushow = this.majorId;
                    } else {
                      this.guanzhushow = 0;
                    }
                    // if(this.majorId ==undefined){
                    //    this.guanzhushow = this.majorId;
                    // }
                  }
                } else {
                }
              }
            });
          }
        }
      });

      // console.log(this.schoolID)
    },
    getmajorlist() {
<<<<<<< HEAD
      //获取关注专业接口，判断该专业是否已经关注。这里为页面一进来时就调用接口判断是否存在，是从关注列表点击专业后回来的判断状态
=======
       //获取关注专业接口，判断该专业是否已经关注。这里为页面一进来时就调用接口判断是否存在，是从关注列表点击专业后回来的判断状态
>>>>>>> 314b442cce11d658746227581b0160373004c345
      this.$ajax({
        method: "post",
        url: "/api/follow/listMajor",
        data: {
          pageNow: 1,
          pageSize: 1000
        },
        success: res => {
          if (res.data.code == 0) {
            this.guanzhumajorbox = res.data.data.list;
            //  console.log(this.majorId)
            for (var i = 0; i < this.guanzhumajorbox.length; i++) {
              if (this.majorId == this.guanzhumajorbox[i].schoolId) {
                this.guanzhushow = this.majorId;
              }
            }
          } else {
          }
        }
      });
    }
  },
  watch: {
    //监听Input输入的内容，使输入后出现的列表状态改变   this.selectshow = 0;
    input: function() {
<<<<<<< HEAD
      delay(() => {
        //执行部分
        if (this.input == "") {
          this.selectshow = 0;
        }
        // console.log(this.input)
        this.$ajax({
          method: "POST",
          url: "/api/major/majorSearchByKey",
          data: {
            keyWord: this.input,
            pageNow: 1,
            pageSize: 1000,
            type: -1
          },
          success: res => {
            if (res.data.code == 0) {
              this.selectresult = res.data.data.list;
              this.selectshow = 1; //使输入后出现的列表状态改变
            }
          }
        });
      }, 500);
    },
    filterText(val) {
      this.$refs.tree.filter(val);
=======
      if (this.input == "") {
        this.selectshow = 0;
      }
      this.$ajax({
        method: "POST",
        url: "/api/major/majorSearchByKey",
        data: {
          keyWord: this.input,
          pageNow: 1,
          pageSize: 1000,
          type: -1
        },
        success: res => {
          if (res.data.code == 0) {
            this.selectresult = res.data.data.list;
            this.selectshow = 1;  //使输入后出现的列表状态改变
          }
        }
      });
>>>>>>> 314b442cce11d658746227581b0160373004c345
    },
    //监听路由变化
    $route(to, from) {
      //当点击专业目录后路由改变，发送ID到子路由遍历该专业内容。
<<<<<<< HEAD
      (this.majorId = this.$route.query.majorId),
        this.$ajax({
          method: "get",
          url: "/api/major/guess/data/" + this.majorId,
          success: res => {
            if (res.data.code == 0) {
              this.majordeatilbox = res.data.data;
              // console.log(this.majordeatilbox);
            }
          }
        });
=======
      this.majorId = this.$route.query.majorId,
      this.$ajax({
        method: "get",
        url: "/api/major/guess/data/" + this.majorId,
        success: res => {
          if (res.data.code == 0) {
            this.majordeatilbox = res.data.data;
            // console.log(this.majordeatilbox);
          }
        }
      });
>>>>>>> 314b442cce11d658746227581b0160373004c345
    }
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.getmajor();
      this.getmajordeatil();
      this.getmajorlist();
    });
  }
};
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

//bounce(动画)
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.router {
  text-decoration: none;
}

.logo {
  padding: 10px 0;

  .centre {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    img {
      width: 48px;
<<<<<<< HEAD
      cursor: pointer;
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
    }
    span {
      font-size: 22px;
      color: #5e5e5e;
      padding-left: 24px;
      position: relative;
      top: -18px;
    }
    .select111 {
      position: absolute;
      left: 300px;
      top: 1px;
      line-height: 68.6px;
      margin-right: 100px;
      float: right;
      .select1 {
      }
    }
    .selectbox {
      position: absolute;
      left: 300px;
      top: 62px;
      background-color: #ffffff;

      line-height: 25px;
      cursor: default;
      .selectbox_content_box {
        padding-top: 20px;
        .selectbox_content {
          display: inline-block;
          font-size: 16px;
          width: 180px;
          padding-right: 20px;
        }
        .selectbox_content:hover {
          background-color: skyblue;
        }
      }
    }
  }
}
.Major {
  background: #f6f6f6;
  width: 100%;

  .h3Deatil {
    color: #757575;
    padding: 26px 0;

    span {
      cursor: pointer;
    }
  }
  .Majors {
    display: flex;
    justify-content: space-between;

    .Major_left {
      width: 240px;
      height: 550px;
      padding-bottom: 10px;
      border-radius: 10px;
      overflow: hidden;
      background: #fff;

      .Major_name {
        padding: 50px 24px 30px 24px;
        background: #e6f0ff;
        .benke {
          padding-right: 34px;
          color: blue;
          cursor: pointer;
        }
        .benke1 {
          padding-right: 34px;
          color: #828486;
          cursor: pointer;
        }
        span {
          padding-right: 34px;
          color: #828486;
          cursor: pointer;
        }
      }
      .Major_centent {
        // padding: 38px 24px 0px 24px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding-right: 50px;
        overflow-y: auto;
        .Major_centent11111 {
          overflow-y: auto;
<<<<<<< HEAD
          padding-bottom: 150px;
          width: 250px;
          .el-input {
            width: 200px;
            margin-left: 20px;
            margin-top: 20px;
          }
          .Major_centent_content {
            margin-top: 15px;
            width: 250px;
=======
          padding-bottom: 50px;
          .Major_centent_content {
            margin-top: 15px;
>>>>>>> 314b442cce11d658746227581b0160373004c345
          }
        }
      }
    }
    .Major_right {
      width: 918px;
      .top {
        height: 134px;
        width: 100% -66px;
        background: #ffffff;
        border-radius: 10px;
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        padding: 0 66px;
        padding-top: 46px;
        .top_left {
          display: flex;
          .MajorLogo {
            width: 68px;
            height: 68px;
            border-radius: 50%;
            margin-right: 20px;
            background: #2e86ff;
            text-align: center;
            line-height: 68px;
            color: #fff;
            i {
              font-size: 38px;
            }
          }
          .Major_name {
            padding-top: 6px;
            h3 {
              font-size: 20px;
              color: #515151;
              padding-bottom: 12px;
            }

            > p {
              color: #a6a6a6;
            }
          }
        }
        .top_right {
          .follow {
            height: 80px;
            img {
              width: 36px;
              float: right;
            }
          }
          .icon {
            display: flex;
            span {
              color: #8b8b8b;
              font-size: 12px;
            }
            ul {
              display: flex;
              li {
                width: 22px;
                height: 22px;
                position: relative;
                border-radius: 50%;
                background: #c8c8c8;
                color: #f6f6f6;
                text-align: center;
                top: -6px;
                margin-left: 8px;
                i {
                  position: relative;
                  font-size: 10px;
                  text-align: center;
                  left: 1px;
                  top: 1px;
                }
              }
            }
          }
        }
      }
      .router {
        margin-bottom: 16px;
        ul {
          width: 100% -136px;
          display: flex;
          justify-content: space-between;
          border-radius: 10px;
          padding: 0 68px;
          background: #ffffff;
          li {
            cursor: pointer;
            padding: 30px 30px;
            color: #a6a6a6;
            font-size: 16px;
          }
        }
        .router-link-exact-active {
          color: #4b4b4b;
        }
      }
      .bottom {
        width: 100%;
      }
    }
  }
}
</style>